<template>
	<view class="container">
		<view class="input-box row">
			<text>联系人：</text>
			<input type="text" :value="name" @input="importName" @blur="importName" />
		</view>
		<view class="input-box row">
			<text>手机号：</text>
			<input type="text" :value="tel" @input="importTel" @blur="importTel" />
		</view>
		<view class="input-box row">
			<text>收货地址：</text>
			<view class="choose-bar row" @click="open">
				<view v-if="region == ''" class="pla">请选择</view>
				<view v-else>{{region}}</view>
				<view class="right-arrow center">
					<image src="../../static/img/more2.png" mode=""></image>
				</view>
				<!-- <view class="item">
					<picker mode="multiSelector" :value="multiIndex" :range="multiObjArray" range-key="name" @change="bindMultiPickerChange">
						<text v-if="region == ''" class="pla">请选择</text>
						<text v-else>{{region}}</text>
						<view class="right-arrow">
							<image src="../../static/img/more2.png" mode=""></image>
						</view>
					</picker>
				</view> -->
			</view>
		</view>
		<view class="input-box row">
			<text></text>
			<textarea :value="address" placeholder="请输入详细地址" placeholder-class="pla" @input="importAddress" @blur="importAddress" />
			</view>
		<view class="save" @click="save">
			保存
		</view>
		<uni-popup ref="popup" type="bottom" maskClick= "false">
			<view class="box">
				<view class="picker-closed row">
				    <text class="float-li" @click='pikerCancel'>取消</text>
				    <text class="float-li-rig" style='color: green' @click='pikerConfirm'>确认</text>
				    </view>
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in provinceList" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in cityList" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in areaList" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>			 
		</uni-popup>
	</view>
</template>

<script>
	import comm from '../../static/data/commFunc.js'
	import cfg from '../../static/data/config.js'
	var r = cfg.router;
	export default {
		data() {
			return {
				name:"",
				tel:"",
				region:"",
				address:"",
				areaCode:[],
				id:'',
				rawData: [],
				provinceList:[],
				cityList:[],
				areaList:[],
				value: [0,0,0],
				visible: false,
			};
		},
		onLoad(e){
		comm.request("POST", "/public/cityList", {}, (res, data) => {
			console.log("省市区数据", res)
			if (res.data.ret_code == 200) {
				this.rowData = data
				this.provinceList= data
				this.cityList = data[0].children
				this.areaList = data[0].children[0].children
			} 
		})
		if(e.id){
			this.id = e.id
			let data = {id:e.id}
			comm.request("POST", "/app/memberAddress/getMemberAddr", data, (res, data) => {
				console.log("单个地址详情", res)
				if (res.data.ret_code == 200) {
					this.name = data.name
					this.tel = data.mobile
					this.region = data.region
					this.address = data.address
					this.areaCode[0] = data.provinceId
					this.areaCode[1] = data.cityId
					this.areaCode[2] = data.areaId
					console.log(this.areaCode)
				} else {
					comm.showToast(res.data.ret_msg, "none")
				}
			})
		}
		},
		onShow(){
			
		},
		methods:{
			open(){
				this.$refs.popup.open()
				this.visible = true
			},
			bindChange: function(e) {
				console.log(e)
				const val = e.detail.value
				this.cityList = this.rowData[val[0]].children
				this.areaList = this.rowData[val[0]].children[val[1]].children
				this.value = val
			},
				
			pikerConfirm(){
				this.$refs.popup.close()
				this.region = this.rowData[this.value[0]].name+this.rowData[this.value[0]].children[this.value[1]].name+this.rowData[this.value[0]].children[this.value[1]].children[this.value[2]].name
				this.areaCode[0] = this.rowData[this.value[0]].id
				this.areaCode[1] = this.rowData[this.value[0]].children[this.value[1]].id
				this.areaCode[2] = this.rowData[this.value[0]].children[this.value[1]].children[this.value[2]].id
				console.log(this.rowData[this.value[0]].id)
				console.log(this.rowData[this.value[0]].children[this.value[1]].id)
				console.log(this.rowData[this.value[0]].children[this.value[1]].children[this.value[2]].id)
			},
				
			pikerCancel(){
				this.$refs.popup.close()
			},
			save(){
				if(this.name == ''){
					comm.showToast("联系人不能为空", "none")
				}else if(this.tel == ''){
					comm.showToast("手机号不能为空", "none")
				}else if(this.region == ''){
					comm.showToast("请选择地区", "none")
				}else if(this.address == ''){
					comm.showToast("请输入地址", "none")
				}else{
					let data = {
						name:this.name,
						mobile:this.tel,
						address:this.address,
						provinceId:this.areaCode[0],
						cityId:this.areaCode[1],
						areaId:this.areaCode[2]
					}
					if(this.id == ''){
						comm.request("POST", "/app/memberAddress/addMemberAddr", data, (res, data) => {
							console.log("添加地址", res)
							if (res.data.ret_code == 200) {
								comm.showToast("添加成功")
								this.name = ''
								this.tel = ''
								this.address = ''
								this.region = ''
								this.areaCode = []
							} else {
								comm.showToast(res.data.ret_msg, "none")
							}
						})
					}else{
						let data1 = {
							id:this.id,
							name:this.name,
							mobile:this.tel,
							address:this.address,
							provinceId:this.areaCode[0],
							cityId:this.areaCode[1],
							areaId:this.areaCode[2]
						}
						comm.request("POST", "/app/memberAddress/editMemberAddr", data1, (res, data) => {
							console.log("修改地址", res)
							if (res.data.ret_code == 200) {
								comm.showToast("修改成功")
								comm.navigateTo(r.myAddress)
							} else {
								comm.showToast(res.data.ret_msg, "none")
							}
						})
					}
					
				}
				
			},
			importName(e){
				this.name = e.detail.value
			},
			importTel(e){
				this.tel = e.detail.value
			},
			importAddress(e){
				this.address = e.detail.value
			},
			changeZone(e){
				console.log(e)
				this.areaCode = e.detail.code
				this.region = e.detail.value[0]+e.detail.value[1]+e.detail.value[2]
			},
		}
	}
</script>

<style lang="less">
.container{
	padding: 30rpx;
}
.input-box{
	margin-bottom: 30rpx;
	text{
		width: 130rpx;
		font-size:26rpx;
		color:rgba(51,51,51,1);
	}
	input,textarea{
		flex: 1;
		border:1rpx solid #E5E5E5;
		padding:10rpx 20rpx;
		border-radius:8rpx;
		font-size: 24rpx;
	}
	.pla{
		font-size:26rpx;
		color:#999999;
	}
	.choose-bar{
		flex:1;	
		justify-content: space-between;
		align-items: center;
		border:1rpx solid #E5E5E5;
		padding:18rpx 20rpx;
		padding-right: 20rpx;
		border-radius:8rpx;
		position: relative;
			text{
				flex:1;
			}
			.right-arrow{
						width: 20rpx;
						height: 20rpx;
						image{
							width: 12rpx;
							height: 21rpx;
						}
					}
	}
}
.save{
	background:rgba(219,48,18,1);
	border-radius:40rpx;
	text-align: center;
	padding: 20rpx 0;
	color: #FFFFFF;
	margin-top: 30rpx;
	font-size: 28rpx;
}

.box{
	height:500rpx;
	padding:30rpx 30rpx;
	background: #FFFFFF;
	.picker-closed{
		justify-content: space-between;
	}
}
picker-view{
	width: 100%;
	height:500rpx;
	
	picker-view-column{
		.item{
			line-height: 35px;
		}
	}
}
</style>
